<template>
    <a-modal :visible="visible" title="导出数据" :width="540" ok-text="批量导出" @cancel="handleCancel">
        <a-tree
            v-model:expandedKeys="exportColumns"
            :field-names="{ children: 'children', title: 'title', key: 'dataIndex' }"
            v-model:selectedKeys="exportColumns"
            v-model:checkedKeys="exportColumns"
            checkable
            :tree-data="getTreeColumns"
        />
        <template #footer>
            <p class="exportTip"> 注: 默认导出筛选后的数据,如需导出全部数据请清空筛选条件 </p>
            <a-button @click="handleCancel"> 取消 </a-button>
            <a-button type="primary" @click="handleExport"> 批量导出 </a-button>
        </template>
    </a-modal>
</template>

<script>
    import { message } from 'ant-design-vue'
    import { computed, defineComponent, ref } from 'vue'

    export default defineComponent({
        name: 'BatchExport',
        props: {
            //分页信息
            pageData: {
                type: Object,
                default: () => {
                    return {}
                }
            },
            //数据源ID
            pageId: {
                type: Number
            },
            //table列数据
            columns: {
                type: Array,
                default: () => []
            },
            //过滤条件
            filter: {
                type: Object,
                default: () => {
                    return {}
                }
            },
            //数据源名称
            fileName: {
                type: String,
                default: () => {
                    return ''
                }
            },
            downloadExcel: {
                type: Function
            },
            exportFormList: {
                type: Function
            }
        },
        setup(props) {
            const visible = ref(false)
            const exportColumns = ref([])
            const filterCondition = ref({})
            const init = filterConditions => {
                visible.value = true
                // 如果需要导出的字段为空, 取出可导出的所有字段
                if (!exportColumns.value.length) {
                    exportColumns.value = getExportColumns(props.columns)
                }
                filterCondition.value = filterConditions || {}
            }

            const noCloumn = ['sequenceNumber', 'operation']
            const getTreeColumns = computed(() => {
                return props.columns.filter(item => !noCloumn.includes(item.dataIndex))
            })
            const getExportColumns = data => {
                if (!data) {
                    return []
                }
                let columns = []
                data.forEach(dataItem => {
                    if (dataItem.children && dataItem.children.length) {
                        columns = columns.concat(getExportColumns(dataItem.children))
                    } else {
                        !dataItem.disabled && !noCloumn.includes(dataItem.dataIndex) && columns.push(dataItem.dataIndex)
                    }
                })
                return columns
            }
            /**
             * 新增参数columns
             * 从外部调用可以直接配置需要导出的字段
             */
            const handleExport = (columns = []) => {
                const columnList = columns.length ? columns : exportColumns.value
                if (!columnList.length) {
                    message.info('请选择要导出的字段')
                    return
                }
                const { current, pageSize } = props.pageData
                const data = {
                    pageId: props.pageId,
                    sort: {
                        // 支持多排序
                        id: 'DESC'
                    },
                    filterCondition: props.filter,
                    columnList,
                    pageNo: current,
                    pageSize
                }
                props.exportFormList(data).then(response => {
                    // // 关闭弹窗
                    props.downloadExcel(response, props.fileName)
                    visible.value = false
                })
            }
            const handleCancel = () => {
                visible.value = false
            }
            return {
                visible,
                handleCancel,
                exportColumns,
                getTreeColumns,
                handleExport,
                filterCondition,
                init
            }
        }
    })
</script>
